window.addEventListener("load", function () {
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	//功能一:动态渲染API分类区
	let html = "";
	//1.获取后台数据进行遍历
	apiTypeData.forEach(function (v, i) {
		//2.遍历时拼接html结构
		// 默认第0个是激活样式
		if (i === 0) {
			html += `<li class= "active" title = ${v.keyword}><a href="#">${v.name}</a></li>`;
		} else if (v.isnew) {
			//判断isnew为true时,增加字体加粗的类
			html += `<li title = ${v.keyword}><a href="#" class = "fw-bold">${v.name}</a></li>`;
		} else {
			//其余的都是普通拼接就可以了
			html += `<li title = ${v.keyword}><a href="#">${v.name}</a></li>`;
		}
	});
	//3.将拼接好的html渲染到对应位置
	$("#apiClassifyList").innerHTML = html;

	//功能二:API分类区点击后增加激活样式
	//1.获取相关节点
	// $("#apiClassifyList li");
	//2.给li绑定点击事件
	$("#apiClassifyList li").forEach(function (v) {
		v.addEventListener("click", function () {
			//3.先排他,清除其他激活的li
			$("#apiClassifyList li").forEach(function (e) {
				e.classList.remove("active");
			});
			//4.再给当前被点击的对象增加激活样式
			this.classList.add("active");
			//功能三:点击API分类区的标签,联动下方的输入框
			//1.将this的textContent赋值给strong的textContent
			$("#searchInput strong").textContent = this.firstElementChild.textContent;
			//2.将this的title值赋值给输入框的value
			$("#searchInput input").value = this.title;
		});
	});
	// 卡片区
	//API列表区域 模拟服务器返回的数据
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	//功能四:API分类卡片区动态渲染
	/*
	//1.获取后台数据,进行遍历
	let cardsHtml = "";
	listDataArr.forEach(function (v) {
		//2.遍历时拼接HTML结构
		cardsHtml += `
		<li class="rel">
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
		${v.isSpecial ? '<span class="abs">企业专用</span>' : ""} 
		<a class="abs" href="#">申请数据</a>
		</li>
		`;
	});
	//3.将HTML结构放入指定位置
	$("#apiCardsList").innerHTML = cardsHtml;
	*/

	//功能五:点击分页器的页码时,增加激活样式
	//1.获取相关节点
	$("#pagination ul li").forEach(function (v) {
		//2.点击时先清除所有的样式
		v.addEventListener("click", function () {
			$("#pagination ul li").forEach(function (e) {
				e.classList.remove("active");
			});
			//3.给自己增加激活样式
			this.classList.add("active");
			//调用分页函数实现分页
			console.log(Number(v.textContent));
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	//功能6:点击分页器实现卡片区的分页
	// 复用封函数，渲染函数
	// 1.实现基本功能
	// 2.确定函数函数名--render
	// 3.确定函数参数--当前页码pagination，每页条数pageSize，arr
	// 当前页码，每页条数，原数据
	// 公式：(当前页码 - 1) * 每页条数！！！
	// （1 - 1） * 5
	// （2 - 1） * 5
	// （3 - 1） * 5
	// 4.确定函数返回值--不需要
	// 5.将功能代码放入函数壳子，替换对应变量
	function render(pagination, pageSize, arr) {
		// 思路：先对数据进行处理然后执行渲染
		// 技巧：数据处理和渲染要分开考虑！！！
		// 对数组进行处理
		// 求开始索引 (当前页码 - 1) * 每页条数
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		//1.获取后台数据,进行遍历
		let cardsHtml = "";
		result.forEach(function (v) {
			//2.遍历时拼接HTML结构
			cardsHtml += `
		<li class="rel">
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
		${v.isSpecial ? '<span class="abs">企业专用</span>' : ""} 
		<a class="abs" href="#">申请数据</a>
		</li>
		`;
		});
		//3.将HTML结构放入指定位置
		$("#apiCardsList").innerHTML = cardsHtml;
	}

	// 6.调用测试
	render(1, 5, listDataArr);
	// 7.优化代码

	/*
	//功能7:动态渲染分页器的分页(这个功能做错了,还影响了蒙层,需要问老师)
	//思路:
	// 1.获取后台总的数据条数istDataArr.length,每页放5条数据,总页数pageNumber = Math.ceil(istDataArr.length % 5)
	let pagesHtml = "";
	//2.拼接html结构
	//2-1.判断如果数据为0,则不需要分页按钮,则为空
	// 2-2.数据大于0,小于5,则只有一页,默认第0个是激活样式
	if (istDataArr.length === 0) {
		pagesHtml += `<li></li>`;
	}
	if (istDataArr.length > 0 && istDataArr.length <= 5) {
		pagesHtml += `<li class = "active">1</li>`;
	}
	if (istDataArr.length > 5) {
		// 2-2.如果有多条数据,有数据则要拼接相对应的页数的结构
		let pageNumber = Math.ceil(istDataArr.length % 5);
		pagesHtml += `<li class = "active">${pageNumber}</li>`;
	}
	//3.将拼接好的html结构放入指定的位置
	$("#pagination ul").innerHTML = pagesHtml;
	*/

	//功能一:点击申请数据按钮弹出蒙层
	//思路:1.获取相关节点
	// $("#mask");
	// $("#apiCardsList");
	// 2.给公共的祖先元素apiCardsList绑定点击事件,事件委派
	$("#apiCardsList").addEventListener("click", function (e) {
		console.log("e事件是啥东西", e);
		console.log("e.target是个什么东西", e.target);

		// 3.根据事件源的localName属性进行区分,a标签
		if (e.target.localName === "a") {
			//4.弹出蒙层
			$("#mask").style.display = "block";
			//思考:开启蒙层时如何禁用滚动条?
			//提示:滚动条是body或根元素的一部分
			$("body").style.overflow = "hidden"; //开启蒙层时禁用滚动条
			e.preventDefault(); //阻止a标签的默认跳转
		}
	});
	//5.点击蒙层关闭蒙层
	$("#mask").addEventListener("click", function () {
		$("#mask").style.display = "none";
		$("body").style.overflow = "auto"; //关闭蒙层时滚动条自动显示
	});
	//6.阻止登录框的事件传播
	$("#loginModel").addEventListener("click", function (e) {
		//阻止冒泡事件,让点击事件停留在登录框,不触发父元素的事件
		e.stopPropagation();
	});

	//功能二:点击模态框中的Tab按钮,对应按钮要激活,显示对应的form表单
	// $("#loginModel form")[0].style.display = "block"; //先默认第0个form表单显示
	$("#loginModel form")[0].classList.add("on"); //因为用函数tab()来激活对应样式,所以这里就用classList去给第0个form表单增加"on"默认显示

	/*
	//1.获取相关节点
	// $("#loginModelTab a");
	//2.给Tab的按钮绑定点击事件
	$("#loginModelTab a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			//先排他,移出所有a标签的激活样式
			$("#loginModelTab a").forEach(function (item, index) {
				item.classList.remove("active");
				//思考:排他时,可以在遍历a标签时就把form表单也清空吗?
				//通过a标签和form的索引一一对应,数量也是一样的,同样的索引来控制也可以
				// $("#loginModel form")[index].style.display = "none";
			});
			//4.再给当前点击的a标签增加激活样式
			this.classList.add("active");
			//5.排他,移出所有显示的form表单
			$("#loginModel form").forEach(function (each) {
				each.style.display = "none";
			});
			//6.显示对应表单的form
			$("#loginModel form")[i].style.display = "block";
		});
	});

		*/
	// 可以用封装函数tab()来激活对应样式
	tab("#loginModelTab a", "active", "#loginModel form", "on");
});
